import { rankContinuousVisualMap } from '../../visualMap/continuous'
import { rankPiecewiseVisualMap } from '../../visualMap/piecewise'
import { initOptions } from '../..'
import { themeBaseColor } from '@/utils/color/theme'

/**
 * 100000.json: 正规中国地图
 * 100001.json: 去除南海诸岛的中国地图
 * 100002.json：去除南海诸岛并添加南海诸岛缩略图的中国地图
 */
export const mapInitOptions = (data, config, systemConfig) => {
  const { t } = useI18n() // 国际化
  const options: any = initOptions(systemConfig)
  options.tooltip.trigger = 'item'
  options.tooltip.formatter = params => {
    if (params.data) {
      return `<div class="echarts-tooltip">
        <div class="tooltip-list">
          <div class="item-tooltip">
            <span class="icon" style="background:${params.color}"></span>
            <span class="name">${t('chart', 'region')}</span>
            <div class="num">${params.data.label}</div>
          </div>
          <div class="item-tooltip">
            <span class="icon" style="background:${params.color}"></span>
            <span class="name">${t('chart', 'count')}</span>
            <div class="num">${params.data.value}</div>
          </div>
        </div>
      </div>`
    }
  }

  options.visualMap.show = true
  // const initOptions: any = ref({
  //   tooltip: {
  //     trigger: 'item',
  //     formatter: function (params) {
  //       if (params.data) {
  //         return `<div class="echarts-tooltip">
  //           <div class="tooltip-list">
  //             <div class="item-tooltip">
  //               <span class="icon" style="background:${params.color}"></span>
  //               <span class="name">${t('chart', 'region')}</span>
  //               <div class="num">${params.data.label}</div>
  //             </div>
  //             <div class="item-tooltip">
  //               <span class="icon" style="background:${params.color}"></span>
  //               <span class="name">${t('chart', 'count')}</span>
  //               <div class="num">${params.data.value}</div>
  //             </div>
  //           </div>
  //         </div>`
  //       }
  //     }
  //   },
  //   visualMap: {
  //     show: true
  //   },
  //   geo: {
  //     map: config.map
  //   },
  //   series: [
  //     {
  //       type: 'map', // 类型
  //       // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
  //       map: config.map, // 地图类型
  //       showLegendSymbol: false,
  //       // 地图系列中的数据内容数组 数组项可以为单个数值
  //       data,
  //       label: {
  //         show: false
  //       },
  //       itemStyle: {
  //         areaColor: systemConfig.value.isLight ? '#eeeeee' : 'rgba(0,0,0,.1)'
  //       },
  //       emphasis: {
  //         label: {
  //           show: false
  //         },
  //         itemStyle: {
  //           areaColor: themeBaseColor.warning
  //         }
  //       },
  //       select: {
  //         label: {
  //           show: false
  //         },
  //         itemStyle: {
  //           areaColor: themeBaseColor.warning
  //         }
  //       }
  //     }
  //   ]
  // })
  const mapOptions = config.visualMap === 'piecewise' ? rankPiecewiseVisualMap(initOptions, systemConfig, true, config.isPrimary) : rankContinuousVisualMap(initOptions, systemConfig, true, config.isPrimary)
  return mapOptions
}
